<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>base</title>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>

    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
<div id="base" v-cloak>
    {{ message }}
</div>
<div id="v-once">
    <span v-once>{{ message }}</span>
    <span v-once>
        <span v-once><span>{{ message }}</span></span>
    </span>
</div>
<!-- v-if v-else-if v-else-->
<div id="v-if">
    <label>status:</label>
    <input type="text" placeholder="请输入status" v-model:name="status">
    <span>status:{{ status }}</span>
    <p v-if="status === 1">v-if，当status为1时显示该行</p>
    <p v-else-if="status===2">v-else-if，当status为2时显示该行</p>
    <p v-else>v-else，否则显示该行.</p>
</div>

<div id="if_template">
    <template v-if="status===1">
        <p>这是一段文本</p>
        <p>这是一段文本</p>
        <p>这是一段文本</p>
    </template>
</div>

<div id="repeat">
    <template v-if="type==='name'">
        <label>用户名：</label>
        <input placeholder="输入用户名" key="name-input">
    </template>
    <template v-else-if="type==='mail'">
        <label>邮箱:</label>
        <input placeholder="请输入邮箱" key="mail-input">
    </template>
    <button @click="handleToggleClick">切换输入类型</button>

</div>
<div id="v-show">
    <p v-show="status===1">当status为1时先显示内容</p>
</div>
<div id="v-for">
    <!--    当需要使用一个数组遍历或枚举一个对象循环显示时，使用v-for。    item in items -->
    <ul>
        <li v-for="(book,index) in books">{{ index }}:{{ book.name }}</li>
    </ul>
    <template v-for="book in books">
        <li>书名:{{ book.name }}</li>
        <li>作者:{{ book.author }}</li>
    </template>
    <ul v-for="value in user">
        <li>姓名:{{ value }}</li>
    </ul>
    <ul v-for="(value,key,index) in user">
        <li>{{ index }}-key-{{ key }}姓名:{{ value }}</li>
    </ul>
    <script>
        new Vue({
            el: '#v-for',
            data: {
                books: [{name: 'Vue.js项目实战', author: "ddasda"}, {
                    name: 'Vue.js项目实战',
                    author: "ddasda"
                }, {name: 'Vue.js项目实战', author: "ddasda"}],
                user: {
                    name: 'liqinchun',
                    gender: '男',
                    age: 27
                }
            }
        })
    </script>
</div>
<div id="array">
    <ul>
        <template v-for="book in books">
            <li>书名：{{ book.name }}</li>
            <li>作者：{{ book.author }}</li>

        </template>
    </ul>
    <script>
        let array = new Vue({
            el: '#array',
            data: {
                books: [{name: 'Vue.js项目实战', author: "ddasda"}, {
                    name: 'Vue.js项目实战',
                    author: "ddasda"
                }, {name: 'Vue.js项目实战', author: "ddasda"}, {name: 'JavaScript项目实战', author: "ddasda"}],
            }
        });
        array.books = array.books.filter(function (item) {
            return item.name.match(/JavaScript/)
        })
    </script>
</div>

<!-- 计算属性返回values，不修改values的值-->
<div id="arraycomputed">
    <p>计算属性返回values，不修改values的值</p>
    <ul>
        <template v-for="book in filterBooks">
            <li>书名：{{ book.name }}</li>
            <li>作者：{{ book.author }}</li>

        </template>
    </ul>
    <p>数组的排序操作，依照name长度排序(升序)</p>

    <ul>
        <template v-for="book in sortedBooks">
            <li>书名：{{ book.name }}</li>
            <li>作者：{{ book.author }}</li>

        </template>
    </ul>
    <script>
        new Vue({
            el: '#arraycomputed',
            data: {
                books: [{name: 'Vue.js项目实战', author: "1"}, {
                    name: 'Vue.js项目实战',
                    author: "ddasda"
                }, {name: 'JavaScript项目实战', author: "22"}, {name: 'JavaScript项目实战', author: "333"}],
            },
            computed: {
                filterBooks: function () {
                    return this.books.filter(function (book) {
                        return book.name.match(/JavaScript/)
                    })
                },
                sortedBooks: function () {
                    return this.books.sort(function (a, b) {
                        return a.name.length < b.name.length
                    })
                }
            }
        });
    </script>
</div>
<!-- v-on处理事件 -->
<div id="v-on">
    <label>点击次数：{{ counter }}</label>
    <button @click="counter++">+1</button>
    <button @click="handleAdd(10)">+10</button>
    <div>
        <a href="www.baidu.com" @click="handleClick('forbid',$event)">打开链接</a>
        <a href="www.baidu.com" @click.stop="handleClick('forbid',$event)">打开链接</a>
    </div>
    <div>
        <!-- 捕获delete按钮事件或者退格事件 -->
        <input @keyup.delete="alert">
    </div>
    <script>
        new Vue({
            el: '#v-on',
            data: {
                counter: 0
            },
            methods: {
                handleAdd: function (count) {
                    count = count || 1;
                    this.counter += count
                },
                handleClick:function (message,event){
                    event.preventDefault();
                    //修饰符
                    window.alert(message)
                },
                alert:function (){
                    window.alert("捕获到了退格事件")
                }
            }
        })
    </script>
</div>



<script>
    let app = new Vue({
        el: document.getElementById('base'),
        data: {
            message: '这是一段文本'
        }
    })
    let v_once = new Vue({
        el: '#v-once',
        data: {
            message: 'v_once指令控制内容只渲染一次，包括元素或组件的所有子节点，首次渲染后不再随数据的变化重新渲染，将被视作静态内容.'
        }
    })
    let v_if = new Vue({
        el: '#v-if',
        data: {
            status: 1
        }
    })
    let if_template = new Vue({
        el: '#if_template',
        data: {
            status: 1
        }
    })
    new Vue({
        el: '#v-show',
        data: {
            status: 1
        }
    })
</script>
<!--v-if和v-show v-if才是真正的条件渲染-->
<script>
    new Vue({
        el: '#repeat',
        data: {
            type: 'name'
        },
        methods: {
            handleToggleClick: function () {
                this.type = this.type === 'name' ? 'mail' : 'name';
            }
        }
    })
</script>


</body>
</html>